<template>
	<div id='change-coupon' @touchstart='stopPrevent($event)'>
		<div class='content' @touchstart.stop='contentOpenScroll'>
			<div class='content-top' >
				<span @touchstart.stop='closeChanCou'>取消</span>
			</div>
			<div @touchstart.stop='noUseCou'>
				<el-row 
					:gutter='10' 
					class='refuse-coupon'
				>
					<el-col :span='21'>
						不使用优惠卷
					</el-col>
					<el-col 
						:span='3' 
						:class="{'radio':true,'radio-no':!offNoCou,'radio-yes':offNoCou}"
					>
					</el-col>
				</el-row>
			</div>
			<div v-for='(val,index) in couponList' :key='index'>
				<MoreCoupon 
					:money='handelMoney(val.couponAmount)' 
					:condition='val.couponName'
					:time='time(val.couponGetTime,val.couponEndTime)'
					:useConpon='false' 
					:conponStatus='val.couponNum'
					@changeCoupon='changeCoupon(val.couponNum)'
				/>
			</div>
		</div>
	</div>
</template>

<script>
	import MoreCoupon from './MoreCoupon.vue';
	import {_money,_date} from '@/comm.js';
	export default {
		props:['couponList'],
		data(){
			return ({
				//控制不使用优惠卷
				offNoCou:false,
			});
		},
		components:{
			MoreCoupon
		},
		methods:{
			//阻止遮罩层下面的滚动
			stopPrevent(e){
				e = e || window.event;
			    e.preventDefault();
			},
			//关闭弹窗
			closeChanCou(){
				this.$emit('closeChanCou');
			},
			//当在内容上需要滚动时，阻止冒泡
			contentOpenScroll(){

			},
			//处理钱分转元
			handelMoney(money){
				if(money){
					return _money(money);
				}else{
					return '0.00'
				}
			},
			//选择哪一个优惠卷
			changeCoupon(status){
				this.closeChanCou();
				//把最终用户选择的优惠卷传到订单页面
				this.$emit('useCoupon',status);
			},
			//不使用优惠卷
			noUseCou(){
				this.closeChanCou();
				//把最终用户选择的优惠卷传到订单页面
				this.$emit('useCoupon','no');
			},
			//处理时间
			time(start,end){
				return _date(start)+'至'+_date(end);
			}
		}
	}
</script>

<style scoped>
	#change-coupon{
		position: fixed;
		top:0;
		right: 0;
		bottom:0;
		left:0;
		z-index:4;
		background: rgba(0,0,0,.5);
		transition: background .5s;
		-moz-transition: background .5s; 
		-webkit-transition: background .5s; 
		-o-transition: background .5s;
	}
	.content{
		position: fixed;
		z-index:2;
		bottom:0;
		height:500px;
		width: 100%;
		background: white;
		overflow-x:hidden;
		overflow-y: auto;
	}
	.content-top{
		padding:20px 1rem;
		color:#999;
		font-size:16px;
		border-bottom: 1px solid #eee;
	}
	.refuse-coupon{
		height:100px;
		padding:0 1rem;
		line-height:100px;
		border-bottom:1px solid #eee;
	}
	.radio-no{
		background:url('../../../static/img/radio-no.png') no-repeat 5px center;
	}
	.radio-yes{
		background:url('../../../static/img/radio-yes.png') no-repeat 5px center;
	}
	.radio{
		height:100%;
		background-size:16px 16px;
	}

</style>